<template>
  <div class="home-banner">
    <XtxSlider :data="list" autoPlay />
  </div>
</template>

<script>
import { findBanner } from '@/api/home'
import { ref, onMounted } from 'vue'

const useSlider = () => {
  /**
     * 1.定义轮播图数据变量
     * 2.定义获取轮播图数据的方法
     * 3.在组件挂载之后发请求
     */
  const list = ref([])
  const getList = async () => {
    const res = await findBanner()
    console.log('kkk', res)
    list.value = res.result
  }
  onMounted(() => {
    getList()
  })
  return { list }
}

export default {
  name: 'HomeBanner',
  setup () {
    // 第一个功能
    const { list } = useSlider()
    // 第二个功能
    return { list }
  }
}
</script>

<style scoped lang='less'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}
</style>
